<template>
  <div class="layout">
    <router-view name="viewHead"></router-view>
    <router-view></router-view>
    <div
      v-for="(item,index) of remoteTransferOrderList"
      :key="index"
      class="dialog"
      v-drag
      :class="{maxIndex:index==maxIndex}"
      @click="ShowClickedWin(index)"
    >
      <section class="content">
        <component :is="item.dialog"></component>
      </section>
    </div>
  </div>
</template>

<script>
import TransferOrderDetail from "./TransferOrderDetail";
// import CONFIG from "../../static/config";
import InfectiousOrderDetail from "./InfectiousOrderDetail";
export default {
  name: "Layout",
  data() {
    return {
      maxIndex: 0,
    };
  },
  methods: {
    GetHospitalList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetHospitalList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetHospitalList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.$message({
              message: "获取医院列表成功",
              type: "success",
            });
            this.$store.dispatch("SaveHospitalList", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求医院列表失败");
        }
      });
    },
    initWebSocket() {
      if ("WebSocket" in window) {
        // 打开一个 web socket
        let ws = new WebSocket(CONFIG.WEBSOCKETURL);

        ws.onopen = () => {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send(
            JSON.stringify({
              msgType: "connection",
            })
          );
          console.log("websocket已连接！");
        };

        ws.onmessage = (evt) => {
          let msg = JSON.parse(evt.data);
          console.log("websocket转运单消息", msg);
          switch (msg.msgType) {
            case "transferOrderDetail":
              this.$store.commit("SaveClickedTransferOrder", msg.data);
              this.$store.dispatch("SaveRemoteTransferOrderList", {transferOrder:msg.data,dialog:TransferOrderDetail});
              //this.dialog = TransferOrderDetail;
              break;
            case "transferOrderConfirm":
              let confirm = JSON.parse(msg.data);
              this.$store.dispatch(
                "RemoveTransferOrder",
                confirm.transferOrderCode
              );
              break;
            case "infectiousOrderDetail":
              this.$store.commit("SaveClickedTransferOrder", msg.data);
         this.$store.dispatch("SaveRemoteTransferOrderList", {transferOrder:msg.data,dialog:InfectiousOrderDetail});
              //this.dialog = InfectiousOrderDetail;
              break;
            default:
              break;
          }
        };

        ws.onclose = () => {
          // 关闭 websocket
        };
      } else {
        // 浏览器不支持 WebSocket
        this.$message({
          message: "您的浏览器不支持WebSocket,无法接收转运单消息",
          type: "error",
        });
      }
    },
    ShowClickedWin(index) {
      this.maxIndex = index;
    },
    GetGiveOxyWayList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetGiveOxyWayList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetGiveOxyWayList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.$store.dispatch("SaveGiveOxyWayList", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求给氧方式列表失败");
        }
      });
    },
    GetInfuseWayList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetInfuseWayList",
        }),
        method: "post",
      }).then((res) => {
        console.log("GetInfuseWayList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            // this.infuseWayList = obj.data;
            this.$store.dispatch("SaveInfuseWayList", obj.data);
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求静脉输液列表失败");
        }
      });
    },
  },
  mounted() {
    this.GetHospitalList();
    this.initWebSocket();
    this.GetGiveOxyWayList();
    this.GetInfuseWayList();
  },
  computed: {
    remoteTransferOrderList() {
      return this.$store.state.remoteTransferOrderList;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout {
  height: 100%;
  background: url("../assets/image/background.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.dialog {
  position: absolute;
  z-index: 99;
  height: 75%;
  width: 76%;
  top: 0;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 20;
}
.content >>> .transfer-order-detail,.content >>> .infectious-order-detail {
  height: 100%;
}
.content >>> .layout {
  width: 100%;
  /* background: url("../assets/image/background.png") no-repeat;
  background-size: 100% 100%; */
  background:rgba(6,53,128,.95)
}
.content >>> .section {
  width: 96%;
}
.content >>> .bottom {
  padding: 0 2%;
  margin-bottom: 0;
}
.maxIndex {
  z-index: 999;
}
</style>